{% extends "nav.html" %}
{% block title %}
View Directory
{% endblock %}

{% block extraHead %}
<link rel="stylesheet" href="https://rawgit.com/enyo/dropzone/master/dist/dropzone.css">
<link href="https://mbraak.github.io/jqTree/jqtree.css" rel="stylesheet">
{% endblock %}
{% block body %}

<div class="container">
    {% if lockdown %}
        <div class="row">
            <div class="alert alert-danger">
                <p class="mb-0">Gallery is in Lockdown! Members cannot view content.</p>
            </div>
        </div>
    {% endif %}
    <div class="row">
        <div class="col-xs-12">
            <ul class="breadcrumb">
                {% for p in parents %}
                    {% if loop.first %}
                    <li><a href="/view/dir/{{ p.id }}">CSH Gallery</a></li>
                    {% elif loop.last %}
                    <li class="active">{{ p.get_name() }}</li>
                    {% else %}
                    <li><a href="/view/dir/{{ p.id }}">{{ p.get_name() }}</a></li>
                    {% endif %}
                {% endfor %}
            </ul>
        </div>
    </div>
{% if children|length >= 1 %}
    <div class="row" id="child_list">
    {% for child_type, child in children %}
        {% if not child.hidden or (auth_dict['is_eboard'] or auth_dict['is_rtp']) %}
            <div class="col-md-3 col-sm-4 col-xs-6">
                <div class="panel panel-default">
                    <div class="panel-body">
                        {% if child_type == "Directory" %}
                            <div class="album-wrapper">
                                <a href="/view/dir/{{ child.id }}">
                                    <img class="album" src="/api/thumbnail/get/dir/{{ child.id }}">
                                </a>
                            </div>
                            <a href="/view/dir/{{ child.id }}">
                                <p>{{ child.get_name() }}</p>
                            </a>
                            <p>Owner: {{ ldap.convert_uuid_to_displayname(child.author) }}</p>
                            <p>Date Created: {{ child.date() }}</p>
                        {% elif child_type == "File" %}
                            <a class="file" href="/view/file/{{ child.id }}">
                                <img {% if child.hidden %}class="filter-hidden"{% endif %} src="/api/thumbnail/get/{{ child.id }}">
                                <p>{{ child.get_name() }}</p>
                            </a>
                            <p>Owner: {{ ldap.convert_uuid_to_displayname(child.author) }}</p>
                            <p>Date Uploaded: {{ child.date() }}</p>
                        {% endif %}
                    </div>
                </div>
            </div>
        {% endif %}
    {% endfor %}
    </div>

    {% if display_description %}
    <p id="description"><strong>Description:</strong> {{ description }}</p>
    {% endif %}
{% else %}
    <div class="row">
        <div class="col-sm-12 text-center">
            <h2>This album is empty.</h2>
            {% if display_description %}
            <p id="description"><strong>Description:</strong> {{ description }}</p>
            {% endif %}
        </div>
    </div>
{% endif %}
<div class="row">
    <div class="col-xs-12 text-center">
        <a href="#!" class="btn btn-primary" onclick="editDirDescription()">Edit</a>
        {% if auth_dict['can_edit'] %}
        <a href="#!" class="btn btn-warning" onclick="moveDir()">Move</a>
        <a href="#!" class="btn btn-danger" onclick="deleteDir()">Delete</a>
        {% endif %}
    </div>
</div>

    <div class="modal fade" id="edit-description" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Edit</h4>
                </div>
                <div class="modal-body text-left">
                    <div class='form-group'>
                        <label class="control-label" for="rename-{{ directory.id }}">Enter a new title for directory <strong>{{ directory.get_name() }}</strong>:</label>
                        <input type="text" class="form-control" id="rename-{{ directory.id }}" value="{{ directory.get_name() }}">
                        <label class="control-label" for="desc-{{ directory.id }}">Enter a new description for directory <strong>{{ directory.get_name() }}</strong>:</label>
                        <input type="text" class="form-control" id="desc-{{ directory.id }}" value="{{ directory.description }}">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Submit</button>
                </div>
            </div>
        </div>
    </div>

    {% if auth_dict['can_edit'] %}
    <div class="modal fade" id="move" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Select a new parent folder:</h4>
                    <div id="fileList"></div>
                    <div class="form-group">
                        <input type="number" name="gallery_dir_id" readonly hidden/>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" id="move-{{ directory.id }}" class="btn btn-primary" data-dismiss="modal">Move</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delete" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                    <h4 class="modal-title">Are you sure?</h4>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
                    <button type="button" id="confirm-{{ directory.id }}" class="btn btn-primary" data-dismiss="modal">Yes</button>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
</div>
<div class="modal fade" id="mkdir-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Create Directory</h4>
            </div>
            <div class="modal-body text-left">
                <div class="form-group">
                    <div class="input-group">
                        <input type="number" name="gallery_mkdir_id" value="{{directory.id}}" readonly hidden/>
                        <label class="control-label" for="gallery_dir_name">Folder name:</label>
                        <input class="form-control" type="text" id="gallery_dir_name" name="gallery_dir_name" placeholder="Welcome Back, 2017-2018/Fall Camping, etc.">
                        <span class="input-group-btn">
                            <input class="btn btn-primary" id="mkdir" type="submit" value="Create"><br />
                        </span>
                    </div>
                </div>

                <div class="description-fields">
                    <div class='form-group'>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="upload-modal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">Upload</h4>
            </div>
            <div class="modal-body text-left">
                <div class="well well-sm">
                    <div id="galleryUpload" class="dropzone">
                        <div class="dz-message" data-dz-message><span>Click or drop images here to upload</span></div>
                    </div>
                </div>
                <div class="description-fields">
                    <div class='form-group'>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <input class="btn btn-primary" id="upload" type="submit" value="Upload">
            </div>
        </div>
    </div>
</div>
<br />
{% endblock %}

{% block extraFooter %}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqtree/1.3.5/tree.jquery.min.js"></script>
<script src="https://rawgit.com/enyo/dropzone/master/dist/dropzone.js"></script>
<script>
    $(function() {
        populateDirTree();
    });
    var mode = "VIEW_DIR";
    var parent = {{ parent }};
</script>
<script>
Dropzone.autoDiscover = false;

    $(function() {

        var myDropzone = new Dropzone('div#galleryUpload', {
            url: '/upload',
            paramName: "gallery-upload",
            uploadMultiple: false,
            autoProcessQueue: false,
            parallelUploads: 3,
            success: afterUpload,
            maxFilesize: 1024,
            init: function() {
                this.on('addedfile', function(file) {
                    console.log(file.name + ": " + file.size);
                    if (file.size > (1024 * 1024 * 1024)) {
                        var warning = "<div class='alert alert-dismissible alert-danger' id='upload-alert'><button type='button' class='close' data-dismiss='alert'>&times;</button><span class='glyphicon glyphicon-exclamation-sign'></span> File \"<strong>" + file.name + "</strong>\" is too large, max filesize is 1GB.</div>";
                        $('#upload').after(warning);
                        this.removeFile(file);
                    }
                });

                this.on('accept', function(file, done) {
                    done();
                });

                this.on('sending', function(file, xhr, formData) {
                    formData.append('parent_id', "{{directory.id}}");
                });

                this.on('complete', function(file) {
                    this.removeFile(file);
                });
            }
        });

        $('#upload').click(function(e){
            e.preventDefault();
            myDropzone.options.autoProcessQueue = true;
            myDropzone.processQueue();
        });
        $('#mkdir').click(createDirectory);
    });
</script>
{% endblock %}
